<template lang="pug">
  #comprehensive
    div 综合详情页
    p {{ counter }}
    p {{ num }} - {{ num2 }}
    van-image-preview(v-model="show", :images="images", @change="onChange")
       template(v-slot:index) 第{{ index }}页
       div 1111
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      show: true,
      index: 0,
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  },
  computed: {
    /**
     * vuex 进阶写法
     * 如果不同名的，通过一个对象来使用
     */
    ...mapState({
      counter: (state) => {
        return state.count
      },
      // 模块下的数据访问, 能访问其他模块的数据吗？
      num: (state) => {
        return state.comprehensive.num
      },
      num2: (state) => {
        return state.comprehensive.num2
      }
    })
  },
  mounted () {
    /**
       * this.$store.commit 只接受两个参数，第一个是mutation的名称，第二个是参数
       * 如果需要传多个参数，第二个参数必须要用Object包装起来
       * 命名空间后，模块化的mutation调用, 需要加上模块名
       */
    this.$store.commit('comprehensive/updateTest', {
      num: 110,
      num2: 220
    })
  },
  methods: {
    onChange (index) {
      this.index = index
    }
  }
}
</script>
